<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>zhonghua error log.</title>
    <style>
        html{
            padding:0;
            margin:0;
        }
        body {
            /*font-family: "Microsoft YaHei", sans-serif;*/
            background-color: black;
            color: #1ff042;
            padding:0;
            margin:0;
        }
        .terminal {
            position: relative;
            padding: 0 1rem 1rem 1rem;
            padding-top:50px;
        }
        .terminal .prompt {

            color: #1ff042;
            display: block;
            /*font-family: 'AndaleMono', monospace;*/
            /*text-transform: uppercase;*/
            font-size: 0.6em;
            letter-spacing: 0.15em;
            white-space: pre-wrap;
            /*text-shadow: 0 0 2px rgba(31, 240, 66, 0.75);*/
            line-height: 1.5;
            margin-bottom: 0.75em;

        }
        .terminal .prompt-item{
            display: flex;
        }
        .terminal .prompt-item:before {
            content: '> ';
            display: inline-block;
        }
    </style>
</head>
<body>
<div style="font-weight:bold;width:100%;position:fixed;height:50px;top:0;padding-top:10px;z-index:1;background:rgba(0,0,0,0.8);">
    <div style="display:flex;justify-content:space-between;align-items:center;">
        <div>
            <span style="margin-left:1rem;font-size:0.8em;">SERVER TIME : </span><span style="font-size:0.8em;" id="time"></span>
        </div>
        <button onclick="document.getElementById('info').innerHTML='';" style="position:absolute;right:1rem;color:#1ff042;border:1px solid #1ff042;background:#000;font-size:0.8em;">CLEAR</button>
    </div>
    <hr style="border-color:#1ff042;"/>
</div>
<div class="terminal">
    <p id="info" class="prompt"></p>
</div>
<script type="text/javascript">
    var info = document.getElementById("info");
    info.insertAdjacentHTML("beforeend","<div class='prompt-item'><div class='prompt-content'>start content to server ···</div></div>");
    var intId=0;
    var reId=0;
    var wsServer = "<?=$socket_host?>";
    var _socket;
    var socketInit = function(){
        try {
            _socket = new WebSocket(wsServer);
            init(wsServer);
        } catch(e) {
            reConnectInfo();
            reConnect();
        }
    };
    var init = function(service){
        _socket.onopen = function(){
            clearInterval(reId);
            reId=0;
            _socket.send(JSON.stringify({type: 'error'}));
            heartBeat();
        };
        _socket.onmessage = function(e){
            var msg = JSON.parse(e.data);
            if(msg['message_type']=="pong"){
                document.getElementById("time").innerHTML = transferDate(msg["timestamp"]*1000);
            }
            if(msg['message_type']=="error"){
                var _msg = 'unknown message type';
                if(typeof msg['content'] == 'object'){
                    _msg = JSON.stringify(msg['content']);
                }
                if(typeof msg['content'] == 'string'){
                    _msg = msg['content'];
                }
                _data_str = "["+transferDate(msg["timestamp"]*1000)+"] ";
                info.insertAdjacentHTML("beforeend","<div class='prompt-item'><div class='prompt-content'>"+_data_str+"<br/>"+_msg+"</div></div>");
                window.scrollTo({top: document.body.scrollHeight, behavior: "smooth"});
            }
        };
        _socket.onclose = function(){
            info.insertAdjacentHTML("beforeend","<div class='prompt-item'><div class='prompt-content'>lost connection!!!</div></div>");
            window.scrollTo({top: document.body.scrollHeight, behavior: "smooth"});
            if(reId==0){
                reConnectInfo();
                reConnect(service);
            }
        };
        _socket.onerror = function(){
            info.insertAdjacentHTML("beforeend","<div class='prompt-item'><div class='prompt-content'>connection error!!!</div></div>");
            window.scrollTo({top: document.body.scrollHeight, behavior: "smooth"});
            if(reId==0){
                reConnectInfo();
                reConnect(service);
            }
        };
    };
    var heartBeat = function(){
        intId=setInterval("sendHeartBeat()",1000);
    };
    var sendHeartBeat = function(){
        _socket.send(JSON.stringify({type: 'ping',platform: 'web'}));
    };
    var reConnect = function(){
        clearInterval(intId);
        intId=0;
        if(reId==0){
            reId = setInterval("socketInit()",2000);
        }
    };
    var reConnectInfo = function(){
        info.insertAdjacentHTML("beforeend","<div class='prompt-item'><div class='prompt-content'>Reconnect……</div></div>");
        window.scrollTo({top: document.body.scrollHeight, behavior: "smooth"});
    };
    var transferDate = function(timestamp) {
        var n = new Date();
        var d = new Date(timestamp || new Date());
        return digit(d.getFullYear()) + '-' + digit(d.getMonth() + 1) + '-' + digit(d.getDate()) + ' ' + digit(d.getHours()) + ':' + digit(d.getMinutes())  + ':' + digit(d.getSeconds());
    };
    var digit = function(num, length, end) {
        var str = '';
        num = String(num);
        length = length || 2;
        for (var i = num.length; i < length; i++) {
            str += '0';
        }
        return num < Math.pow(10, length) ? str + (num | 0) : num;
    };
    socketInit();
</script>


</body>
</html>
